<template>
    <header class="m-b-20">
        <span class="date">{{today}}</span>
        <h2 class="title">能源工业云网物联大数据中心</h2>
        <a class="header-icon" @click="changeScreen">
            <img src="../../assets/img/icon/icon_zoom.png"/>
        </a>
    </header>
</template>

<script>
    import {parseTime} from '../../utils/common'
    import ScreenFull from 'screenfull'
    export default {
        name: "headerIndex",
        data: () => ({
            today: '',
        }),
        methods: {
            showTime() {
                this.today = parseTime(new Date(), '{y}年{m}月{d}日 {h}:{i}:{s} 星期{a}');
            },
            //   全屏效果
            changeScreen() {
                if (!ScreenFull.isEnabled) {
                    // 此时全屏不可用
                    this.$message.warning('此时全屏组件不可用');
                    return
                }
                ScreenFull.toggle()
            }
        },
        created() {
            this.showTime();
            const _this = this;
            setInterval(() => {
                _this.showTime();
            }, 1000);
        },
    }
</script>

<style scoped type="text/less" lang="less">
    header {
        position: relative;
        text-align: center;
        width: 100%;
        height: 6.9vh;
        background-repeat: no-repeat;
        h2 {
            margin: 0 auto;
            width: 775px;
            line-height: 200%;
            font-size: 36px;
            color: @defaultColor;
            font-weight: normal;
            background-image: url("../../assets/img/bg/bg_title.png");
            background-position: center bottom;
            background-size: cover;
        }
        .date, .header-icon {
            display: inline-block;
            position: absolute;
            bottom: 10px;
        }
        .date {
            left: 50px;
        }
        .header-icon {
            right: 50px;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
    }
</style>
